<template>
  <el-form label-width="40px" label-position="right" size="small">
    <el-row :gutter="20">
      <el-col v-if="showLevel.find(item => item === '省')" :span="8">
        <el-form-item label="省：" prop="provinceId">
          <Filters
            v-model="provinceId"
            :type="'province'"
            :placeholder="placeholder.province"
            :size="size"
            :clearable="clearable"
            @change="changeProvince"
            @clear="clear('provinceId', 'cityId', 'districtId')"
          />
        </el-form-item>
      </el-col>
      <el-col v-if="showLevel.find(item => item === '省') && showLevel.find(item => item === '市')" :span="8">
        <el-form-item label="市：" prop="cityId">
          <filters
            v-model="cityId"
            :type="'city'"
            :parent-id="provinceId"
            :placeholder="placeholder.city"
            :size="size"
            :clearable="clearable"
            @change="changeCity"
            @clear="clear('cityId', 'districtId')"
          />
        </el-form-item>
      </el-col>
      <el-col v-if="showLevel.find(item => item === '省') && showLevel.find(item => item === '市') && showLevel.find(item => item === '区')" :span="8">
        <el-form-item label="区：" prop="districtId">
          <filters
            v-model="districtId"
            :type="'district'"
            :parent-id="cityId"
            :placeholder="placeholder.district"
            :size="size"
            :clearable="clearable"
            @clear="clear('districtId')"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import Filters from './filters'

export default {
  name: 'ZlstAddressInput',
  components: {
    Filters
  },
  props: {
    showLevel: {
      type: Array,
      default() {
        return ['省', '市', '区']
      }
    },
    placeholder: {
      type: Object,
      default() {
        return {
          province: '省',
          city: '市',
          district: '区'
        }
      }
    },
    size: {
      type: String,
      default: 'medium'
    },
    clearable: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      provinceId: '',
      cityId: '',
      districtId: ''
    }
  },

  methods: {
    changeProvince(val) {
      this.cityId = ''
      this.districtId = ''
      this.$emit('changeProvince', val)
    },
    changeCity(val) {
      this.districtId = ''
      this.$emit('changeCity', val)
    },
    clear(code1, code2, code3) {
      this[code1] = ''
      this[code2] = ''
      this[code3] = ''
      this.$emit('clear')
    }
  }
}
</script>
